<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../js/vue.js"></script>
<div id="app">{{message}}
  <button @click="btn1Click">按钮1</button>
  <!--当事件的方法需要参数时，调用方法有括号会传一个undefined过去-->
  <button @click="btn2Click()">按钮2</button>
  <!--当事件的方法需要参数时，调用方法没有括号，会传一个浏览器事件过去-->
  <button @click="btn2Click">按钮3</button>
  <!--当事件的方法需要多个参数时，调用方法没有括号，默认第一个参数是浏览器事件，后面的都是undefined-->
  <button @click="btn3Click">按钮4</button>
  <!--当事件的方法需要多个参数时，调用方法有括号，都是undefined-->
  <button @click="btn3Click()">按钮5</button>
  <!--当事件的方法需要多个参数时，调用方法有括号，只传递一个参数时，后面的时undefined-->
  <button @click="btn3Click(123)">按钮6</button>
  <!--当事件的方法需要多个参数时，调用方法有括号，需要传递浏览器事件时用$event表示-->
  <button @click="btn3Click(123,$event)">按钮7</button>



</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"第一次，系统的学VUE"
        },
      methods:{
          btn1Click(){
            console.log("btn1Click")
          },
        btn2Click(event){
          console.log("-------------",event)
        },
        btn3Click(abc,event){
          console.log("-------------",abc);
          console.log(event);
        }
      }
    })
</script>

</body>
</html>